<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Login</title>

    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/signin.css}" rel="stylesheet">

  </head>

  <body class="text-center">
    <form class="form-signin" onsubmit="javascript:return false">
      <img class="mb-4" th:src="@{/img/logo.jpg}" width="72" height="72"/>
      <h1 id="fmtitle" class="h3 mb-3 font-weight-normal">Please sign in</h1>

      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>

      <button class="btn btn-lg btn-primary btn-block" id="loginBt">Sign in</button>
      <a href="/register">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Register</a>

    </form>

  </body>
  <script th:src="@{/jquery/jquery.min.js}"></script>
  <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

  <script th:inline="javascript">
      $("#loginBt").click(function(){
          $(".alert").remove();
          if($("#inputEmail").val() == "" || $("#inputPassword").val() == ""){
              $("<div class=\"alert alert-danger alert-dismissable\"> <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button> <strong>ERROR</strong> Email or password can not be empty! </div>").insertAfter("#fmtitle");
              return;
          }
          $.ajax({
              type:"POST",
              url:"signin",
              data:{email:$("#inputEmail").val(),password:$("#inputPassword").val()},
              datatype: "json",
              success:function(data){
                  if(data=='OK'){
                      window.location = "/index";
                  }else{
                      $("<div class=\"alert alert-danger alert-dismissable\"> <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button> <strong>ERROR</strong> Invalid email or password! </div>").insertAfter("#fmtitle");
                  }

              },

              error: function(){
                $("<div class=\"alert alert-danger alert-dismissable\"> <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button> <strong>ERROR</strong> Invalid email or password! </div>").insertAfter("#fmtitle");
              }
          });

      });
  </script>
</html>
